<template>
	<view class="container">
		<view class="orderTypes">
			<view class="typeBox" v-for="(item,index) in orderType" :key="index" :class="typeIndex == index ? 'active':''" @click="changeType(index)">
				{{ item.title }}
				<span class="mores"></span>
			</view>
		</view>
		<view class="heardInfo">
			<view class="heardBox">	
			</view>
			<p>个人素材</p>
		</view>
		<view class="fodders-box">
			<view class="video-Box">
				<view v-for="(item,index) in cartList" :key="index" class="lists" @click="preview(item)">
					<image :class="{'mask':selectedAssets.some(asc => asc.mediaId === item.mediaId)}" :src="item.coverUrl"
						v-if="item.coverUrl" mode="widthFix"></image>
					<image v-show="selectedAssets.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
						:src=" imageUrl + 'xuanzhong.png'" mode="widthFix"></image>
					<view @click.stop="playVideo(item.mediaId)" class="playBtn">
						<image :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
					</view>
					<p @click.stop="toDetele(item, index)">
						<span>
							<i>
								<span>{{timesModes(item.duration) + '"'}}</span>
							</i>
							<i>
								<uni-icons type="close"></uni-icons>
							</i>
							<!-- <i style="color: #ffffff;">{{item.time}}</i> -->
						</span>
					</p>
				</view>
			</view>
			<!-- 暂无素材 -->
			<view v-show="this.cartList.length === 0" style="text-align: center; margin: 50rpx 0;color: #CCD0D5;">
				暂无个人素材
			</view>
		</view>
	
		<view class="heardInfo">
			<view class="heardBox">
			</view>
			<p>空镜素材</p>
		</view>
		<view class="fodders-box">
			<view class="video-Box">
				<view v-for="(item,index) in kongCatList" :key="index" class="lists" @click="previewKong(item)">
					<image :class="{'mask':selectedKong.some(asc => asc.mediaId === item.mediaId)}" :src="item.coverUrl"
						v-if="item.coverUrl" mode="widthFix"></image>
					<view @click.stop="playVideo(item.mediaId)" class="playBtn">
						<image :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
					</view>
					<image v-show="selectedKong.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
						:src=" imageUrl + 'xuanzhong.png'" mode=""></image>
					<p @click.stop="toDeteleKong(item, index)">
						<span>
							<i>
								<span>{{timesModes(item.duration) + '"'}}</span>
							</i>
							<i>
								<uni-icons type="close"></uni-icons>
							</i>
							<!-- <i style="color: #ffffff;">{{item.time}}</i> -->
						</span>
					</p>
				</view>
			</view>
			<!-- 暂无素材 -->
			<view v-show="this.kongCatList.length === 0" style="text-align: center;margin: 50rpx 0;color: #CCD0D5;">
				暂无空镜素材
			</view>
		</view>
		<!-- <kongListPage :kongCatList="kongCatList" @myEvent="handleMyEvent"></kongListPage> -->
		<!-- 底部 -->
		<view class="tButton">
			<view class="left">
				已选中 {{ selectedAssets.length + selectedKong.length }} 个素材
				<!-- <checkbox class='round red' style="transform: scale(0.8)" :value="effvalue" /><text>已选中
					{{ selectedAssets.length }} 个素材</text> -->
			</view>
			<view class="right">
				<button @click="selectionMealBtn">选择套餐</button>
			</view>
		</view>

		<!-- 套餐选择弹窗 -->
		<uni-popup ref="popupselectPackage" type="bottom" @maskClick="cancel">
			<view class="popup-contentBox">
				<h1>请选择套餐</h1>
				<view class="" v-if="naxNumber >= selectedAssets.length">
					<view @click="changeMeal(item)"
						v-for="(item,index) in mealDataList" :key="item.id">
						<view class="setMeal" :class="{'active':mealData.id === item.id}" v-if="item.sourceMax >= selectedAssets.length">
							<view class="left">
								<image :src="mealIcon[index].icon" mode="aspectFit"></image>
							</view>
							<view class="content">
								<h2>{{ item.setMealName }}</h2>
								<p>{{ item.setMealDesc }}</p>
							</view>
							<view class="right">
								<span>￥{{ item.price }}</span>
								<view v-show="item.setMealName === '钻石套餐'" class="border">
							
								</view>
								<p v-show="item.setMealName === '钻石套餐'">推荐</p>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<p style="color: #ff0000;font-size: 24rpx;margin: 25rpx;">您的素材太多啦，套餐最多只能选择 {{ naxNumber }} 个素材，请删减到符合套餐要求的数量！</p>
				</view>
				<view class="btnList">
					<h5>已选中{{selectedAssets.length + selectedKong.length}}个素材</h5>
					<button @click="mealSure">确认套餐</button>
				</view>
			</view>
		</uni-popup>
		<!-- 视频播放弹窗 -->
		<uni-popup ref="popupskiingVideo" class="skiingVideo-Box">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCloseVideo()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width: 100%;" v-if="videoUrl" :src="videoUrl"></video>
				<view class="shuiyin" @click='videoOpreation'>哇咔咔wakaka</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import kongListPage from '@/pages/shoopcar/kong.vue'
	import videoPlay from '@/pages/index/components/video-play/video-play.vue'
	import {
		getCreateMedia,
		getMediaInfoi,
		searchMedia
	} from '@/api/service.js'
	import {
		getSetMeal
	} from '@/api/shoopcar.js'
	import {
		payMentInfo
	} from '@/api/payment.js'
	import {
		getSnowToken,
		setCartList,
		getCartList,
		setKongList,
		getKongList,
		setMealData,
		getUserData,
	} from '@/utils/storage.js'
	import imageConfig from '@/utils/images.js'
	export default {
		components: {
			kongListPage,
			videoPlay,
		},
		data() {
			return {
				videoUrl: '',
				kongCatList:[],
				imageUrl:imageConfig.uploadImageUrl,
				// 购物车梳理
				cartList: getCartList('cart_list'),
				// 选中的个人素材
				selectedAssets: [],
				// 选中的套餐
				mealData: [],
				// 套餐数据
				mealDataList: [],
				// 最大素材数
				sourceMax: null,
				// 最小素材数
				sourceMin: null,
				mealIcon:[],
				naxNumber:null,
				orderType:[
					{title:'AIGC'},
					{title:'空镜素材'}
				],
				typeIndex:0,
				indexVideo: '',
				// 空镜
				kongCatList: [],
				selectedKong: [],
			}
		},
		onLoad(option) {
			this.mealIcon = [
				{icon:this.imageUrl + 'meal-diamond.png'},
				{icon:this.imageUrl + 'meal-gold.png'},
				{icon:this.imageUrl + 'meal-basics.png'}
			]
		},
		mounted() {},

		onShow() {
			this.kongCatList = getKongList() || []
		},

		methods: {
			cancel(){
				this.mealData = []
			},
			// 删除购物车里的素材
			toDetele(item, index) {
				this.cartList.splice(index, 1)
				setCartList(this.cartList)
			},
			// 选择套餐弹窗
			selectionMealBtn() {
				if(this.selectedAssets.length <= 0){
					uni.showToast({
						title: "未选个人素材",
						icon:"error"
					})
				}else{
					this.$refs.popupselectPackage.open()
					const id = getSnowToken()
					// 获取套餐信息
					getSetMeal(id).then((res) => {
						if (res.code === 200) {
							// 存入套餐
							this.mealDataList = res.data
							this.sourceMaxNumber(res.data)
							// if(this.selectedAssets.length)
						} else {
							uni.showToast({
								title: "套餐信息获取失败"
							})
						}
					})
				}
				
			},
			sourceMaxNumber(item){
				let numbers = 0
				for(let i = 0 ; i < item.length ; i++ ){
					if(item[i].sourceMax <= numbers){
						
					}else{
						numbers = item[i].sourceMax
					}
				}
				this.naxNumber = numbers
				console.log(numbers)
			},
			// 套餐选择
			changeMeal(item) {
				this.mealData = item
				setMealData(this.mealData)
				this.sourceMax = item.sourceMax
				this.sourceMin = item.sourceMin
				console.log(item,'选择套餐')
			},
			changeType(index){
				console.log(index)
				if(index === 1) {
					uni.navigateTo({
						url:"/pages/fodder/kongjing"
					})
				}
			},

			// 确认订单
			mealSure() {
				if (!this.mealData.id) {
					uni.showToast({
						title: "请选择套餐",
						icon: "error"
					})
					return
				}else {
					const aa = [...this.selectedAssets,...this.selectedKong]
					uni.navigateTo({
						url: "/pages/order/components/order-goods?selectData="+ encodeURIComponent(JSON.stringify(aa)),
					})
					this.$refs.popupselectPackage.close()
				}
			},

			// 删除订单
			toDetele(item) {
				const index = this.cartList.findIndex(function(acd) {
					return acd.mediaId === item.mediaId;
				});
				uni.showModal({
					title: '删除素材',
					content: '确定删除该素材?',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮，执行删除操作
							this.cartList.splice(index, 1)
							// 同步到本地存储
							setCartList(this.cartList)
							// 同时删除购物车的素材
							this.selectedAssets = this.selectedAssets.filter(i => i.mediaId !== item.mediaId)
						}
					}
				})
			},

			// 选中的素材
			preview(item) {
				console.log(item, 'item')
				if (this.selectedAssets.some(acs => acs.mediaId === item.mediaId)) {
					// this.selectedAssets.splice(item,1)
					this.selectedAssets = this.selectedAssets.filter(i => i.mediaId !== item.mediaId)
					// console.log('已添加')
					// uni.showToast({
					// 	title: '素材已添加',
					// 	icon: 'none', // 显示无图标
					// 	duration: 1000 // 持续时间2秒
					// });
					return
				}
				this.selectedAssets.push(item)
				console.log(this.selectedAssets, 'selectedAssets')
			},
			
			// 播放视频
			playVideo(id) {
				// this.indexVideo = video
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: id,
					urlUseage: 'Play'
				}).then(res => {
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					console.log(this.videoUrl,'000')
				})
				this.$refs.popupskiingVideo.open("bottom")
			},
			// 关闭素材弹窗
			toCloseVideo() {
				this.$refs.popupskiingVideo.close()
				this.videoUrl = ''
			},
			timesModes(time){
				const times = new Date(time * 1000).toISOString().substr(14, 5).replace(
					':', "'")
				return times
			},
			// 空镜
			// 删除订单
			toDeteleKong(item) {
				const index = this.kongCatList.findIndex(function(acd) {
					return acd.mediaId === item.mediaId;
				});
				uni.showModal({
					title: '删除素材',
					content: '确定删除该素材?',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮，执行删除操作
							this.kongCatList.splice(index, 1)
							// 同步到本地存储
							setKongList(this.kongCatList)
							// 同时删除购物车的素材
							this.selectedKong = this.selectedKong.filter(i => i.mediaId !== item.mediaId)
						}
					}
				})
			},
			
			// 选中的素材
			previewKong(item) {
				if (this.selectedKong.some(acs => acs.mediaId === item.mediaId)) {
					// this.selectedKong.splice(item,1)
					this.selectedKong = this.selectedKong.filter(i => i.mediaId !== item.mediaId)
					this.$emit('myEvent', this.selectedKong)
					return
				}
				this.selectedKong.push(item)
				console.log(this.selectedKong, 'selectedKong000')
			},

		}
	}
</script>
<style lang="less">
	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>
<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100VH;
		background-color: #f2f6f9;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 180rpx;
		// padding: 0 40rpx;
		
		// 套餐弹窗
		.popup-contentBox {
			width: 750rpx;
			// height: 1080rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;
		
			h1 {
				padding-top: 36rpx;
				padding-bottom: 72rpx;
				text-align: center;
				font-size: 43rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #000000;
			}
		
			.setMeal {
				position: relative;
				margin: 0 auto;
				margin-bottom: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 678rpx;
				height: 145rpx;
				background: #F2F2F2;
				border-radius: 14rpx;
				color: #000;
		
				.left {
					margin-left: 20rpx;
		
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
		
				.content {
					text-align: center;
		
					h2 {
						font-size: 33rpx;
					}
		
					p {
						font-size: 22rpx;
					}
				}
		
				.right {
					margin-right: 20rpx;
					font-size: 33rpx;
		
					span {
						margin-right: 30rpx;
					}
		
					.border {
						position: absolute;
						right: 0;
						top: 0;
						width: 0rpx;
						height: 0rpx;
						border-top: 50rpx solid #FF9727;
						border-left: 50rpx solid transparent;
						border-right: 50rpx solid #FF9727;
						border-bottom: 50rpx solid transparent;
						// background-color: pink;
					}
		
					p {
						color: #ffffff;
						position: absolute;
						transform: rotate(45deg);
						top: 20rpx;
						right: 10rpx;
						font-size: 26rpx;
					}
				}
			}
		
			.active {
				background-color: #A7CCEF;
				color: #FFFFFF;
			}
		
			.btnList {
				margin: 0 50rpx;
				padding-bottom: 60rpx;
				// margin-top: 250rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;
		
				h5 {
					line-height: 72rpx;
					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #000000;
				}
		
				button {
					margin: 0;
					width: 254rpx;
					height: 72rpx;
					background: #4CA2EC;
					border-radius: 36rpx;
		
					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 72rpx;
				}
			}
		}
		
		// 视频播放弹窗
		.skiingVideo-list {
			padding-bottom: 60rpx;
			width: 100VW;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			position: relative;
		
			.skiingVideo-button {
				position: absolute;
				top: 40%;
				right: 30rpx;
				bottom: 100rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;
				// justify-content: flex-start;
				padding: 20rpx 0;
				align-items: center;
				font-size: 32rpx;
				color: #929292;
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
		
				view {
					text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
					font-weight: 600;
				}
		
				&.active {
					color: #4CA2EC;
		
					/deep/.uni-icons {
						font-size: 70rpx !important;
						color: #4CA2EC !important;
					}
				}
			}
			.shuiyin{
				position: absolute;
				width: 300rpx;
				height: 10rpx;
				left:30rpx;
				top:180rpx;
				color: #ffffff;
				font-size: 45rpx;
				opacity: 0.6;
				transform: rotate(-30deg);
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			}
				
			.title {
				margin-top: 8VH;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// position: relative;
				
				/deep/.uni-icons {
					position: absolute;
					left: 20rpx;
					top: 0;
				}
			}
		
			.videoBox {
				video {
					width: 100%;
				}
			}
		
			.btn {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
		
				.dontMe {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #B0B0B0;
					border-radius: 27rpx;
				}
		
				.addSucai {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #A7CCEF;
					border-radius: 27rpx;
				}
			}
		}
		
		.orderTypes{
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			height: 72rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
			.typeBox{
				width: 50%;
				text-align: center;
				line-height: 72rpx;
				position: relative;
				font-size: 32rpx;
				color:#1D2129;
				.mores{
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					background-color: #4CA2EC;
					transform: skew(30deg, 0deg);
					opacity: 0;
				}
				&.active{
					background-color: #4CA2EC;
					color:#FFFFFF;
					.mores{
						opacity: 1;
					}
				}
				
				&:nth-child(1){
					.mores{
						right: -50rpx;
						top: 0;
						clip-path: inset(0% 0 0% 0 round 0 50% 0 0%);
					}
				}
				&:nth-child(2){
					margin-left: -30rpx;
					
					.mores{
						left: -50rpx;
						top: 0;
						clip-path: inset(0% 0 0% 0 round 0 0% 0 50%);
					}
				}
			}
		}
		
		.heardInfo {
			// margin-left: 20rpx;
			display: flex;
			margin: 30rpx;
			font-size: 33rpx;
			color: #0085ff;
			.heardBox {
				margin-right: 10rpx;
				width: 10rpx;
				height: 40rpx;
				background-color: #0085ff;
			}
		}

		.fodders-box {
			margin: 0 auto;
			width: 690rpx;
			margin: 20rpx auto;

			.video-Box {
				// padding-bottom: 100rpx;
				width: 100%;
				margin-top: 20rpx;
				columns: 2; // 默认列数
				column-gap: 20rpx; // 列间距

				.lists {
					position: relative;
					// overflow: hidden;
					border-radius: 8rpx;
					width: 100%;
					break-inside: avoid;
					margin-bottom: 20rpx;
					// background: #ffffff;
					// background-color: rgba(0, 0, 0, .5);
					
					video {
						width: 100%;
						border-radius: 8rpx;
					}
					
					image {
						width: 100%;
						border-radius: 8rpx;
						vertical-align: bottom;
					}
					
					.playBtn {
						position: absolute;
						right: 20rpx;
						top: 20rpx;
						
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.mask {
						position: relative;
					}

					.mask::before {
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.5);
						opacity: 0.8;
					}

					.mask::before image {
						width: 50rpx;
						height: 50rpx;
					}

					.maskicon {
						position: absolute;
						top: 40%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 50rpx;
						height: 50rpx;
					}

					p {
						// display: none;
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						padding: 0;
						margin: 0;
						background: rgba(0,0,0,0.5);
						border-radius: 0 0 8rpx 8rpx;
						display: flex;
						height: 45rpx;
						overflow: hidden;
						align-items: center;
						
						>span {
							// height: 50rpx;
							font-size: 50rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							width: 100%;
							font-size: 20rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #ffffff;
							
							span {
								margin-left: 30rpx;
								background-color: rgba(0, 0, 0, 0);
							}

							i {
								align-items: center;
								color: #ffffff;

								/deep/.uni-icons {
									font-size: 35rpx !important;
									color: #ffffff !important;
									margin-right: 30rpx;
								}
							}

						}
					}
				}
			}
		}

		.tButton {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// top: 0;
			bottom: 0;
			width: 749rpx;
			height: 181rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			.left {
				margin-left: 18rpx;

				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #4CA2EC;
				line-height: 82rpx;

			}

			.right {
				margin-right: 18rpx;

				button {
					width: 254rpx;
					height: 72rpx;
					background: #4CA2EC;
					border-radius: 36rpx;

					font-size: 27rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
				}
			}
		}

		
		
	}
</style>